<template>
  <div class="containerDiv" v-loading="loading">
    <el-form
        ref="queryRef"
        :inline="true"
        :model="queryParams"
        class="form-box"
    >
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.configName"
                clearable
                placeholder="模板名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="queryParams.configType" placeholder="类型" clearable>
              <el-option label="系统默认" value="0"/>
              <el-option label="自定义" value="1"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="打印纸张"
                v-model="queryParams.paperSize"
            >
              <template v-for="(item,index) in paperSizeList" :key="index">
                <el-option :label="item" :value="item"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.width"
                clearable
                placeholder="宽"

            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.height"
                clearable
                placeholder="高"

            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div>
      <el-button type="primary" @click="clickAdd" v-hasPermi="['setting:print:save']">新增自定义尺寸</el-button>
    </div>
    <vxe-table
        border
        style="margin-top: 20px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="configType" title="类型">
        <template #default="{row}">
          {{ row.configType == '0' ? '系统默认' : '自定义' }}
        </template>
      </vxe-column>
      <vxe-column field="configName" width="300" title="模板名称"></vxe-column>
      <vxe-column field="paperSize" title="打印纸张(mm)"></vxe-column>
      <vxe-column title="打印尺寸">
        <template #default="{row}">
          <div>宽:{{ row.width }}mm</div>
          <div>高:{{ row.height }}mm</div>
        </template>
      </vxe-column>
      <vxe-column field="applyModule" title="系统应用模块"></vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" title="仓库" width="150"></vxe-column>
      <vxe-column field="status" title="设为默认">
        <template #default="{row}">
          <el-switch v-model="row.status" @click="updateStatus(row)" v-hasPermi="['setting:print:save']"/>
        </template>
      </vxe-column>
      <vxe-column title="操作">
        <template #default="{row}">
          <el-button type="text" style="color:green" @click="clickView(row)">预览</el-button>
          <el-button type="text" @click="clickEdit(row)" v-hasPermi="['setting:print:save']">编辑</el-button>
          <el-button v-if="row.configType=='1' && row.status=='0'" type="text" style="color:red" @click="handleDelete(row.printConfigId)" v-hasPermi="['setting:print:delete']">删除
          </el-button>
        </template>
      </vxe-column>
      <vxe-column title="锁定打印机">
        <template #default="{row}">
          <el-link v-if="row.printMachine" type="success" @click="clickSetPrint(row)"  v-hasPermi="['setting:print:save']">{{ row.printMachine }}</el-link>
          <el-button v-else type="text" @click="clickSetPrint(row)" v-hasPermi="['setting:print:save']">锁定打印机</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
    <!--  设置默认打印机-->
    <el-dialog v-model="isShowSetPrint" v-if="isShowSetPrint"
               :before-close="clsePrint"
               title="设置打印机"
               draggable
               width="400px"
               append-to-body
    >
      <div>
        锁定打印机:
        <el-select v-model="printMachine" clearable placeholder="打印机">
          <template v-for="(item,index) in printNameList" :key="index">
            <el-option
                :label="item"
                :value="item"
            />
          </template>
        </el-select>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="clickSave"> 保存 </el-button>
          <el-button @click="clsePrint">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <EditReceive v-if="isShowDialog" :isShowDialog="isShowDialog" :title="title" :detailData="detailData"
                    @cancel="handleClose"></EditReceive>

    <!--    预览-->
    <el-dialog v-model="isShowTemp"
               :before-close="closeTemp"
               title="模板预览"
               draggable
               width="400px"
               append-to-body
    >
      <div>
        <img :src="Shbq1" v-if="rowData.printStyle==='1'" style="width: 100%;">
        <img :src="Shbq2" v-if="rowData.printStyle==='2'"  style="width: 100%;">

      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeTemp">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";
import EditReceive from "@/views/settings/components/receive/editReceive.vue";
import { deletePrintConfig, getPaperSizeList, getPrintConfigList, updatePrintConfig} from "@/api/scApi";
import {getLodop} from "@/assets/LodopFuncs";
import Shbq1 from "@/assets/images/shbq1.jpg"
import Shbq2 from "@/assets/images/shbq2.jpg"


const {proxy} = getCurrentInstance()
let loading = ref(false)
let queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  printType: 2
})
let total = ref(0)
let tableList = ref([])
let isShowDialog = ref(false)
let isShowSetPrint = ref(false)
let title = ref("")
let detailData = ref({})
let paperSizeList = ref([]) //纸张集合
let printMachine=ref("")//打印机名称

let isShowTemp=ref(false)
onMounted(() => {
  getList()
  getPrintPaperSize()
  setTimeout(() => {
    LODOP = getLodop();
    getPrinterCount()
  }, 500)

})

function getList() {
  getPrintPaperSize()
  loading.value=true
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value
  }
  getPrintConfigList(params).then(res => {
    if (res.code === 200) {
      tableList.value = res.data.map(item => {
        item.status = item.status == '0' ? true : false
        return item
      })
      total.value = res.total
    }
  }).finally(()=>{
    loading.value=false
  })

}
//获取纸张下拉
function getPrintPaperSize() {
  getPaperSizeList({printType: 2}).then(res => {
    if (res.code === 200) {
      paperSizeList.value = res.data
    }
  })
}

const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    printType: 2
  }
  getList();
};

let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 400;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 400;
}

function clickAdd() {
  isShowDialog.value = true
  title.value = '新增自定义尺寸'
}

//新增编辑 关闭
function handleClose(isReload) {
  detailData.value={}
  isShowDialog.value = false
  if(isReload){
    getList()
  }
}

function clickEdit(row) {
  isShowDialog.value = true
  title.value = '编辑模板'
  detailData.value = JSON.parse(JSON.stringify(row))
}
//修改状态 是否默认
function updateStatus(row) {
  let params = {
    printConfigId: row.printConfigId,
    printType: 2,
    status: row.status ? 0 : 1
  }
  updatePrintConfig(params).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess('保存成功')
      getList()
    }
  })
}

let LODOP;
let printNameList = ref([]) //打印机集合
function getPrinterCount() {
  LODOP = getLodop();
  if (LODOP) {
    //获取打印机个数
    let printNum = LODOP.GET_PRINTER_COUNT();
    for (let i = 0; i < printNum; i++) {
      printNameList.value.push(LODOP.GET_PRINTER_NAME(i))
    }
  }
}

let rowData=ref({})
function clickSetPrint(row) {
  rowData.value =row
  isShowSetPrint.value = true
}
//设置打印机
function clickSave(){
  let params = {
    printConfigId: rowData.value.printConfigId,
    printType: 2,
    printMachine: printMachine.value
  }
  updatePrintConfig(params).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess('保存成功')
      getList()
    }
  }).finally(()=>{
    isShowSetPrint.value = false
  })
}
function clsePrint(){
  printMachine.value=""
  rowData.value={}
  isShowSetPrint.value = false
}

//预览模板
function clickView(row){
  rowData.value =row
  isShowTemp.value =true
}
//关闭预览模板
function closeTemp(){
  rowData.value ={}
  isShowTemp.value =false
}

//删除打印配置
function handleDelete(id){
  proxy.$modal.confirm('是否确认删除该数据？').then(() => {
    deletePrintConfig(id).then(res=>{
      if(res.code===200){
        proxy.$modal.msgSuccess('删除成功!')
        getList()
      }
    })
  }).catch(() => {
  });

}
</script>

<style scoped lang="scss">
.containerDiv {
  padding: 0 20px;
  height: calc(100vh - 160px);
}
</style>